<template>
  <!-- 销售 项目预测详情 -->
  <view class="costs-assign">
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <div :class="['costs-assign-item orange']" v-for="(item, index) in List" v-if="List && List.length > 0">
      <div class="costs-assign-item-title">
        <div class="title nowrap u-flex u-row-between">
          <div class="title-left">
            <text class="line"></text>
            {{ item.Title }}
          </div>
          <text class="u-font-lg u-m-r-60 gray">{{ item.Region_Area }}</text>
        </div>
        <div class="timer nowrap">{{ item.WaysTypeName }}</div>
      </div>
      <div class="costs-assign-item-con">
        <div
          class="flex"
          style="display: flex;justify-content: space-between; align-items: center; ;padding-right: 40rpx; margin-top: 16rpx;"
        >
          <div class="row-item" style="margin-top: 0;">
            <div class="label-name">落地城市</div>
            <div class="price">{{ item.ProvinceName }}</div>
          </div>
          <text v-html="getStateText(item)"></text>
        </div>
        <div class="row-item">
          <div class="label-name">预测费用</div>
          <div class="price">￥{{ item.BDRCost }}</div>
        </div>

        <div class="row-item">
          <div class="label-name">项目进度</div>
          <div class="price" v-html="getProcessText(item)"></div>
        </div>

        <div class="row-item">
          <div class="label-name">项目时间</div>
          <div class="price">{{ $u.timeFormat(item.Created) }}</div>
        </div>
      </div>

      <div class="btn-group u-p-b-20 u-p-r-20 u-text-right">
        <u-button
          type="warning"
          size="medium"
          plain
          :custom-style="btnStyle"
          shape="circle"
          @click="toDetailPage(item)"
        >
          详情
        </u-button>

        <u-button
          class="u-m-l-10 u-m-t-20"
          v-if="showRecommitBtn(item)"
          type="warning"
          size="medium"
          :custom-style="btnStyle"
          shape="circle"
          @click="handleRecommit(item)"
        >
          再次提交
        </u-button>

        <template v-if="item.CourseState != 99 && item.CourseState != 999">
          <u-button
            class="u-m-l-10 u-m-t-20"
            v-if="showApplyExecuteBtn(item)"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="toApplyExecutePage(item)"
          >
            申请执行
          </u-button>

          <u-button
            v-if="showCheckBtn(item)"
            class="u-m-l-10 u-m-t-20"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="toApplyCheckPage(item)"
          >
            费用核销
          </u-button>
          <u-button
            v-if="showCancelBtn(item)"
            class="u-m-l-10 u-m-t-20"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="handleDelayClick(item)"
          >
            延期
          </u-button>
          <u-button
            v-if="showEditBtn(item)"
            class="u-m-l-10 u-m-t-20"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="handleEditClick(item)"
          >
            编辑
          </u-button>
          <u-button
            v-if="showCancelBtn(item)"
            class="u-m-l-10 u-m-t-20"
            type="warning"
            size="medium"
            plain
            :custom-style="btnStyle"
            shape="circle"
            @click="handleCancelClick(item)"
          >
            取消
          </u-button>
          <!-- <u-button
            v-if="showRevokeBtn(item)"
            class="u-m-l-10 u-m-t-20"
            type="warning"
            size="medium"
            plain
            :custom-style="btnStyle"
            shape="circle"
            @click="handleCancelClick(item)"
          >
            撤销
          </u-button> -->

          <u-button
            class="u-m-l-10 u-m-t-20"
            v-if="showPDFDownloadBtn(item)"
            type="warning"
            size="medium"
            :custom-style="btnStyle"
            shape="circle"
            @click="toApplyExecutePage(item)"
          >
            PDF下载
          </u-button>

          <u-button
            v-if="showDeleteBtn(item)"
            class="u-m-l-10 u-m-t-20"
            type="warning"
            size="medium"
            plain
            :custom-style="btnStyle"
            shape="circle"
            @click="handleDeleteClick(item)"
          >
            删除
          </u-button>
        </template>
      </div>
    </div>
    <u-empty v-else text="暂无数据" mode="list"></u-empty>
    <u-loadmore :status="status" />

    <view class="fixed-btn" @click="$u.route({ url: '/pages/marketCosts/sales/predictionReport' })">
      <span style="font-size: 28rpx;">预测</span>
      <span style="font-size: 28rpx;">申报</span>
    </view>

    <!-- 撤销删除 -->
    <u-modal
      v-model="showDeleteConfirm"
      ref="deleteConfirmRef"
      :async-close="true"
      :show-title="false"
      :content="confirmTitle"
      :show-cancel-button="true"
      @confirm="handleDeleteConfirm"
    ></u-modal>

    <!-- 取消 -->
    <u-modal
      v-model="showCancelConfirm"
      ref="cancelConfirmRef"
      :async-close="true"
      :show-title="false"
      :content="confirmTitle"
      :show-cancel-button="true"
      @confirm="handleCancelConfirm"
    ></u-modal>

    <u-modal
      v-model="showDelayModal"
      title="延期"
      :show-cancel-button="true"
      @confirm="handleDelayConfirm"
      :async-close="true"
      ref="delayModalRef"
    >
      <u-cell-group>
        <u-cell-item label="开始时间" :arrow="false" required @tap="showStart = true">
          <text>{{ ImpStartTime_Str || '请选择' }}</text>

          <u-calendar
            class="calendar"
            safe-area-inset-bottom
            v-model="showStart"
            mode="date"
            :min-date="MinDate"
            max-date="2100-01-01"
            btn-type="warning"
            active-bg-color="#F19D38"
            @change="handleStartTimeChange($event)"
          ></u-calendar>
        </u-cell-item>
        <u-cell-item label="结束时间" :arrow="false" required :value="ImpEndTime_Str" @tap="showEnd = true">
          <text>{{ ImpEndTime_Str || '请选择' }}</text>

          <u-calendar
            class="calendar"
            v-model="showEnd"
            safe-area-inset-bottom
            mode="date"
            max-date="2100-01-01"
            btn-type="warning"
            active-bg-color="#F19D38"
            @change="handleEndTimeChange($event)"
          ></u-calendar>
        </u-cell-item>
      </u-cell-group>
    </u-modal>
  </view>
</template>

<script>
import { getTimeByDateString } from '@/common/dateUtils';
export default {
  data() {
    return {
      itemArr: [2, 3],
      isShowBtn: false,

      title: '项目列表',

      confirmTitle: '',
      showConfirm: false,
      showDeleteConfirm: false,
      showCancelConfirm: false,

      cancelForm: {
        VId: '',
        DetailId: '',
        ApplyManagerId: '',
        CourseState: ''
      },

      showDelayModal: false,

      ImpStartTime_Str: '',
      ImpEndTime_Str: '',
      showStart: false,
      showEnd: false,
      MinDate: '',

      delayForm: {
        VId: '',
        DetailId: '',
        ApplyManagerId: '',
        CourseState: '',
        ImpStartTime: '',
        ImpEndTime: ''
      },

      deleteForm: {
        VId: '',
        DetailId: '',
        ApplyManagerId: '',
        Type: ''
      },

      btnStyle: {
        height: '50rpx',
        color: '#ffffff',
        padding: '0 30rpx'
      },

      quarters: ['第一季度', '第二季度', '第三季度', '第四季度'],

      searchParams: {
        Year: '',
        QuarterId: '',
        CompanyId: '',
        VId: '',
        type: 5
      },
      status: 'loadmore',
      IsFirst: true,
      Page: {
        Items: [],
        PageCount: 0,
        PageIndex: 0,
        PageSize: 10,
        TotalCount: 0
      },
      List: []
    };
  },

  onLoad(options) {
    if (options.Id) {
      this.searchParams.VId = options.Id;
    }
    if (options.Year) {
      this.searchParams.Year = options.Year;
    }
    if (options.QuarterId) {
      this.searchParams.QuarterId = options.QuarterId;
    }

    this.getData(true);
  },

  // 触底事件
  onReachBottom() {
    if (this.Page.PageIndex + 1 >= this.Page.PageCount) return;
    this.status = 'loading';
    this.Page.PageIndex = this.Page.PageIndex + 1;
    this.getData();
  },

  methods: {
    handleStartTimeChange(e) {
      this.ImpStartTime_Str = e.result;
      this.delayForm.ImpStartTime = getTimeByDateString(e.result) / 1000;
    },

    handleEndTimeChange(e) {
      this.ImpEndTime_Str = e.result;
      this.delayForm.ImpEndTime = getTimeByDateString(e.result) / 1000;
    },

    handleCancelClick(item) {
      this.showCancelConfirm = true;

      this.confirmTitle = '是否确定取消？';

      this.cancelForm.VId = item.VId;
      this.cancelForm.DetailId = item.Id;
      this.cancelForm.ApplyManagerId = this.vuex_user.ManagerId;
      this.cancelForm.CourseState = 99;
    },
    handleDeleteClick(item) {
      this.showDeleteConfirm = true;
      this.confirmTitle = '是否确定删除？';

      this.deleteForm.VId = item.VId;
      this.deleteForm.DetailId = item.Id;
      this.deleteForm.ApplyManagerId = this.vuex_user.ManagerId;
      this.deleteForm.Type = -1;
    },
    handleDelayClick(item) {
      this.showDelayModal = true;

      this.delayForm.VId = item.VId;
      this.delayForm.DetailId = item.Id;
      this.delayForm.ApplyManagerId = this.vuex_user.ManagerId;
      this.delayForm.CourseState = 4;

      this.ImpEndTime_Str = '';
      this.ImpStartTime_Str = '';

      this.MinDate = this.$u.timeFormat(item.StartTime, 'yyyy-mm-dd');
    },

    handleDelayConfirm() {
      console.log(this.delayForm);

      this.$u.api
        .cancelPrediction(this.delayForm)
        .then(res => {
          const { ResultCode, ResultMessage } = res;

          if (ResultCode == 1) {
            this.showDelayModal = false;
            this.$u.toast(ResultMessage);
            this.getData(true);
          }
        })
        .catch(() => {
          console.log('cancel catch');
          this.$refs.delayModalRef.clearLoading();
        });
    },

    handleDeleteConfirm() {
      this.$u.api
        .deletePrediction(this.deleteForm)
        .then(res => {
          const { ResultCode, ResultMessage } = res;

          if (ResultCode == 1) {
            this.showDeleteConfirm = false;
            this.$u.toast(ResultMessage);
            this.getData(true);
          }
        })
        .catch(() => {
          this.$refs.deleteConfirmRef.clearLoading();
        });
    },
    handleCancelConfirm() {
      this.$u.api
        .cancelPrediction(this.cancelForm)
        .then(res => {
          const { ResultCode, ResultMessage } = res;

          if (ResultCode == 1) {
            this.showCancelConfirm = false;
            this.$u.toast(ResultMessage);
            this.getData(true);
          }
        })
        .catch(() => {
          console.log('cancel catch');
          this.$refs.cancelConfirmRef.clearLoading();
        });
    },

    getDetailState(CourseState, state_str) {
      var result = '';
      if (CourseState == 99) {
        result = '取消';
      } else if (CourseState == 999) {
        result = '撤销';
      } else {
        result = state_str;
      }
      return result;
    },

    getProcessText(item) {
      const MarketMoney_Project_New_State_str = {
        '1': "<span style='color:black;'>计划<span>",
        '2': "<span style='color:green;'>待执行<span>",
        '3': "<span style='color:green;'>待核销<span>",
        '4': "<span style='color:green;'>核销中<span>",
        '5': "<span style='color:green;'>已完成<span>",
        '6': "<span style='color:orange;'>延期执行<span>",
        '7': "<span style='color:red;'>取消<span>",
        '8': "<span style='color:red;'>申请驳回<span>",
        '9': "<span style='color:green;'>执行中<span>"
      };

      return MarketMoney_Project_New_State_str[item.NewState] ?? '';
    },

    getStateText(item) {
      let MarketMoney_Project_State_str = {
        '1': "<span style='color:black;'>待审核<span>",
        '2': "<span style='color:green;'>-<span>",
        '3': "<span style='color:green;'>-<span>",
        '4': "<span style='color:green;'>-<span>",
        '5': "<span style='color:green;'>-<span>",
        '6': "<span style='color:black;'>待审核<span>",
        '7': "<span style='color:black;'>待审核<span>",
        '8': "<span style='color:black;'>待审核<span>",
        '9': "<span style='color:green;'>审核中<span>",
        '11': "<span style='color:red;'>审核驳回<span>",
        '99': "<span style='color:green;'>审核中<span>",
        '101': "<span style='color:red;'>审核驳回<span>",
        '199': "<span style='color:green;'>审核中<span>",
        '201': "<span style='color:red;'>审核驳回<span>",
        '299': "<span style='color:green;'>审核中<span>",
        '301': "<span style='color:red;'>审核驳回<span>",
        '999': "<span style='color:black;'>撤销<span>"
      };

      return this.getDetailState(item.CourseState, MarketMoney_Project_State_str[item.State]);
    },

    showCheckBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.State == 3 || item.State == 4) {
          return true;
        }
      }

      return false;
    },

    showDeleteBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.State == 1 || item.State == 2 || item.State == 9 || item.State == 101) {
          return true;
        }
      }

      return false;
    },

    showRecommitBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.CourseState == 999) {
          return true;
        }

        if (item.State == 11 || item.State == 101 || item.State == 201 || item.State == 301) {
          return true;
        }
      }

      return false;
    },

    showPDFDownloadBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.State == 5 && item.PDFURL) {
          return true;
        }
      }
      return false;
    },

    showRevokeBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.State == 1 || item.State == 9) {
          return true;
        }
      }

      return false;
    },

    showCancelBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.State == 2) {
          return true;
        }
      }

      return false;
    },

    showEditBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.State == 1 || (item.State == 9 && item.ThisAuditManagerId == this.vuex_user.ManagerId)) {
          return true;
        }
      }
      return false;
    },

    showApplyExecuteBtn(item) {
      if (item.ApplyManagerId == this.vuex_user.ManagerId) {
        if (item.State == 2) {
          return true;
        }
      }

      return false;
    },

    handleRecommit(item) {
      let AgainSubmit_EditType = '';

      if (item.CourseState == 99 || item.CourseState == 999) {
        if (item.CourseState == 999) {
          AgainSubmit_EditType = 1;
        }
      } else {
        if (item.State == 11) {
          AgainSubmit_EditType = 1;
        } else if (item.State == 101) {
          AgainSubmit_EditType = 3;
        } else if (item.State == 201) {
          AgainSubmit_EditType = 4;
        } else if (item.State == 301) {
          AgainSubmit_EditType = 6;
        }
      }

      this.$u.route({
        url: '/pages/marketCosts/sales/recommit',
        params: {
          Id: item.VId,
          DetailId: item.Id,
          EditType: AgainSubmit_EditType
        }
      });
    },

    handleEditClick(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/predictionReport',
        params: {
          Id: item.VId,
          DetailId: item.Id,
          PostType: 2
        }
      });
    },

    toApplyCheckPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/applyCheck',
        params: {
          Id: item.VId,
          type: 'apply',
          DetailId: item.Id
        }
      });
    },
    toDetailPage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/detail',
        params: {
          Id: item.VId,
          DetailId: item.Id
        }
      });
    },
    toApplyExecutePage(item) {
      this.$u.route({
        url: '/pages/marketCosts/sales/applyExecute',
        params: {
          Id: item.VId,
          type: 'apply',
          DetailId: item.Id
        }
      });
    },

    toCancelPage(item, state) {
      this.$u.route({
        url: '/pages/marketCosts/sales/cancel',
        params: {
          Id: item.VId,
          State: state,
          DetailId: item.Id
        }
      });
    },

    getData(reload) {
      this.$u.api
        .getPredictionDetailList({
          ...this.searchParams,
          ...{
            Pageindex: this.Page.PageIndex,
            Pagesize: this.Page.PageSize
          }
        })
        .then(res => {
          const { ProjectAuditList: PageList, ResultCode, ResultMessage } = res;

          if (ResultCode == 1) {
            if (PageList) {
              this.Page = PageList;
              if (reload) {
                this.List = PageList.Items;
              } else {
                this.List.push(...PageList.Items);
              }

              if (this.Page.PageIndex + 1 >= this.Page.PageCount) {
                this.status = 'nomore';
              }
            } else {
              this.List = [];
              this.status = 'nomore';
            }
          } else {
            this.$u.toast(ResultMessage);
          }
        });
    }
  }
};
</script>

<style lang="scss">
.fixed-btn {
  position: fixed;
  right: 60rpx;
  bottom: 60rpx;
  background-color: #f19d39;
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  user-select: none;
  z-index: 9999;
}

.btn-group-fixed {
  box-shadow: 0px 0px 8px rgba(174, 178, 183, 0.25);
  background: #fff;
  z-index: 9999999;
  height: 110rpx;
  display: flex;
  width: 100%;
  justify-content: space-between;
  .primary-btn,
  .error-btn {
    height: 110rpx;
    line-height: 110rpx;
    padding: 0 20rpx;
    color: #fff;
  }
  .primary-btn {
    background: #2b79ff;
    margin-right: -20rpx;
  }
  .error-btn {
    background: #fa3633;
  }
}
.costs-assign {
  width: 750rpx;
  padding: 20rpx 20rpx;
  padding-bottom: 140rpx;
  .costs-assign-item {
    position: relative;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 16rpx;
    margin-bottom: 28rpx;
    border-top: 6rpx solid #ff8441;
    .del-btn {
      position: absolute;
      right: 0;
      top: -6rpx;
      font-weight: bold;
      background: #a1a0a0;
      width: 80rpx;
      text-align: center;
      height: 54rpx;
      line-height: 54rpx;
      border-radius: 0 16rpx 0 30rpx;
    }
    .checkedActive {
      background: #f4570e;
    }
    .costs-assign-item-title {
      padding-top: 30rpx;
      padding-bottom: 10rpx;
      border-radius: 16rpx 16rpx 0 0;
      line-height: 50rpx;
      font-size: 30rpx;
      border-bottom: 1rpx dashed #b9b9b9;
      .title {
        display: flex;
        align-items: center;
        flex: 2;
        font-size: 36rpx;
        font-weight: bold;
        .line {
          display: inline-block;
          height: 36rpx;
          width: 6rpx;
          margin-right: 20rpx;
          background: #ff8441;
        }
      }

      .title-left {
        width: 560rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .timer {
        margin-left: 26rpx;
        flex: 1;
        color: #ff8441;
        font-size: 30rpx;
      }
    }
    .costs-assign-item-con {
      font-size: 30rpx;
      padding: 0 20rpx 10rpx 20rpx;
      position: relative;
      .status-audit {
        position: absolute;
        right: 80rpx;
        top: 30%;
        // transform: rotateZ(30deg);
      }

      .process-audit {
        position: absolute;
        right: 80rpx;
        top: 0;
      }

      .success {
        color: #2eac67;
      }
      .row-item {
        display: flex;
        margin-top: 16rpx;
        .label-name {
          color: #666;
          width: 200rpx;
        }
        .price {
          // font-size: 36rpx;
        }
      }
      hr {
        margin: 28rpx 0;
        border: 1rpx dashed #b9b9b9;
      }
    }
    .add-timer {
      padding-top: 20rpx;
      margin-left: 20rpx;
    }
    .btn-wrap {
      margin: 20rpx;
      padding-bottom: 20rpx;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 16rpx;
      gap: 20rpx;
      .btn-item {
        border-radius: 6rpx;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
      }
      .info-btn,
      .set-btn,
      .adjust-btn {
        border: 1px solid #ff7626;
        color: #ff7626;
      }
      .cost-btn {
        background: linear-gradient(301.09deg, #f29e40 6.64%, #f7b66e 91.7%);
        color: #fff;
      }
    }
  }
}
.gray {
  color: #999;
  font-weight: normal;
}
.center {
  text-align: center;
}
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.u-dropdown__content__popup {
  border: 1px solid #f2f3f6;
}
/deep/.u-dropdown__menu {
  height: 68rpx !important;
  background: linear-gradient(301.09deg, #f29e40 6.64%, #f7b66e 91.7%);
  border-radius: 6rpx;
}
/deep/.u-dropdown__menu__item__text,
/deep/.u-icon__icon {
  color: #fff !important;
}
/deep/.u-dropdown__content__mask {
  display: none;
}
</style>
